<template>
  <a-modal
    title="記一筆"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false">
          <a-input v-decorator="['roomId', {rules: [{required: true, message: '请選擇房間！'}]}]" />
        </a-form-item>
         <a-form-item v-show="false">
          <a-input v-decorator="['glRoomType', {initialValue: 1, rules: [{required: true, message: '请選擇房間！'}]}]" />
        </a-form-item>
        <a-form-item v-show="false">
          <a-input v-decorator="['revenuesTypeName', {rules: [{required: true, message: '请選擇類目！'}]}]" />
        </a-form-item>
        <a-form-item
          label="收支類型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group  @change="onTypeChange" placeholder="请选择收支類型" v-decorator="['type', {initialValue: 1, rules: [{ required: true, message: '请选择收支類型！' }]}]" >
            <a-radio :value="1">收入</a-radio>
            <a-radio :value="2">支出</a-radio>
            <a-radio :value="3">應收帳</a-radio>
            <a-radio :value="4">應付帳</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="房間"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
            <a-input  placeholder="選擇房產房間" :disabled="true"  v-decorator="['roomName', {rules: [{ required: true, message: '請選擇房產房間！' }]}]">
                <a-icon slot="addonAfter"  type="search" @click="onSelectRoom"/>
            </a-input>
        </a-form-item>
        <a-form-item
          label="租客"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input placeholder="请输入姓名" v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
        </a-form-item>
        <a-form-item
          label="類目"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select style="width: 100%" placeholder="请选择類目" v-decorator="['revenuesType', {rules: [{ required: true, message: '请选择類目' }]}]">
            <a-select-option v-for="(item,index) in revenuesTypeData" :key="index" :value="item.id" @click="handleRevenuesTypeChange(item.name)">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
           <a-input-number
              style="width:100%"
              placeholder="請輸入金额"
              :precision="2"
              :min="0"
              :max="99999999"
              :step="10"
              v-decorator="['amount', { initialValue: 0, rules: [{required: true, message: '請輸入金额'}]}]"/>
        </a-form-item>
        <div v-if="atType">
            <a-form-item
              label="結款日期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-date-picker style="width: 100%" placeholder="请选择結款日期" v-decorator="['shouldReceiveDate', {initialValue: moment().format('YYYY-MM-DD'), rules: [{ required: true, message: '请选择結款日期！' }]}]" @change="onChangeshouldReceiveDate"/>
            </a-form-item>
            <a-form-item
              label="收款方式"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select style="width: 100%" placeholder="请选择收款方式" v-decorator="['collectionType', {rules: [{ required: true, message: '请选择收款方式！' }]}]">
                <a-select-option v-for="(item,index) in collectionTypeData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
        </div>
        <div v-if="!atType">
            <a-form-item
              label="應結款日期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-date-picker style="width: 100%" placeholder="请选择應結款日期" v-decorator="['shouldReceiveDate', {initialValue: moment().format('YYYY-MM-DD'), rules: [{ required: true, message: '请选择應結款日期！' }]}]" @change="onChangeshouldReceiveDate"/>
            </a-form-item>
            <a-form-item
              label="收租提醒开关"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-radio-group placeholder="请选择收租提醒" button-style="solid" onch v-decorator="['rentReminderSwitch',{ initialValue: 0, rules: [{ required: true, message: '请选择收租提醒！' }]}]" @change="onRentReminderSwitchChange">
                          <a-radio-button  :key="0" :value="0">關閉</a-radio-button>
                          <a-radio-button  :key="1" :value="1">開啓</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <div v-show="onRentReminderSwitch">
              <a-form-item
                  label="收租提醒提前 天"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select  style="width: 100%" v-decorator="['rentReminderDay', { initialValue: 1 , rules: [{ required: true, message: '请选择收租提醒提前 天！' }]}]">
                    <a-select-option  style="width: 100%"  v-for="(item,index) in 100" :key="index" :value="item">{{ item }}天</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="收租提醒提前 小時"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select  style="width: 100%" v-decorator="['rentReminderHour', { initialValue: 0 , rules: [{ required: true, message: '请选择收租提醒提前 小時！' }]}]">
                    <a-select-option  style="width: 100%"   :key="0" :value="0">0點</a-select-option>
                    <a-select-option  style="width: 100%"  v-for="(item,index) in 23" :key="index" :value="item">{{ item }}點</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="收租提醒提前 分鐘"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select  style="width: 100%" v-decorator="['rentReminderMinutes', { initialValue: 0 , rules: [{ required: true, message: '请选择收租提醒提前 分鐘！' }]}]">
                    <a-select-option  style="width: 100%"  :key="0" :value="0">0分</a-select-option>
                    <a-select-option  style="width: 100%"  v-for="(item,index) in 59" :key="index" :value="item">{{ item }}分</a-select-option>
                  </a-select>
                </a-form-item>
            </div>
        </div>
        <a-form-item
          label="備注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-textarea placeholder="请输入備注" v-decorator="['remark']" />
        </a-form-item>
      </a-form>
    </a-spin>
    <room-other-select ref="roomOtherSelect" @ok="handleSelectRoomOk" />
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { billOtherRevenuesAdd } from '@/api/modular/main/billotherrevenues/billOtherRevenuesManage'
  import { getListByType } from '@/api/modular/main/buscostincomeexpenses/busCostIncomeExpensesManage'
  import { busMeansOfTransactionList } from '@/api/modular/main/busmeansoftransaction/busMeansOfTransactionManage'
  import roomOtherSelect from './roomOtherSelect.vue'
  export default {
    components: {
      roomOtherSelect
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        typeData: [],
        shouldReceiveDateDateString: moment().format('YYYY-MM-DD'),
        collectionTypeData: [],
        revenuesTypeData: [],
        atType: true,
        onRentReminderSwitch: false,
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      moment,
      // 初始化方法
      add (record) {
        this.initData()
        this.getSzList(1)
        this.visible = true
        this.atType = true
        this.onRentReminderSwitch = false
      },
      initData () {
         busMeansOfTransactionList().then((res) => {
          if (res.code === 200) {
            this.collectionTypeData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      onTypeChange(e) {
       const t = e.target.value
       this.$nextTick(() => {
            this.form.setFieldsValue({
              revenuesType: '',
              revenuesTypeName: ''
            })
        })
       if (t === 1 || t === 3) {
         this.getSzList(1)
       } else {
         this.getSzList(2)
       }
       if (t === 1 || t === 2) {
         this.atType = true
       }
      if (t === 3 || t === 4) {
         this.atType = false
       }
      },
      onSelectRoom() {
        this.$refs.roomOtherSelect.select(1)
      },
      handleSelectRoomOk (roomId, roomStrName, type, zkname) {
        this.$nextTick(() => {
            this.form.setFieldsValue({
              roomId: roomId,
              roomName: roomStrName,
              glRoomType: type,
              name: zkname
            })
        })
      },
      getSzList(type) {
        getListByType(type).then((res) => {
          if (res.code === 200) {
            this.revenuesTypeData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      onRentReminderSwitchChange() {
        this.onRentReminderSwitch = !this.onRentReminderSwitch
      },
      handleRevenuesTypeChange(e) {
        this.$nextTick(() => {
            this.form.setFieldsValue({
              revenuesTypeName: e
            })
        })
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.shouldReceiveDate = this.shouldReceiveDateDateString
            billOtherRevenuesAdd(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      onChangeshouldReceiveDate(date, dateString) {
        this.shouldReceiveDateDateString = dateString
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
